<template>
  <div class="data-statistics">
    <ContentForm name="横向分析">
      <div slot="searchform" class="form-top">
        <form action="">
          <p class="form-top-p">
            <el-select v-model="valuek.deptCode" clearable placeholder="选择供电段" @change="line">
              <el-option
                v-for="item in formz.selectSection"
                :key="item.value"
                :label="item.deptName"
                :value="item.deptCode" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-select v-model="valuek.selectLin" clearable placeholder="选择线路" @change="listByLineId">
              <el-option
                v-for="item in formz.selectLin"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-select v-model="valuek.directionId" clearable placeholder="行别" @change="getpillarList">
              <el-option
                v-for="item in formz.selectXingb"
                :key="item.value"
                :label="item.label"
                :value="item.id" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-select v-model="valuek.lineSiteCode" placeholder="选择区间站场" clearable @change="getpillarList">
              <el-option
                v-for="item in formz.selectQujian"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </p>
          <p class="form-top-p">
            <select-table
              ref="selecttable"
              v-model="valuek.pillarNum"
              value-key="pillarId"
              label-key="pillarNum"
              table-value-key="id"
              placeholder="请选择支柱"
              :filter-form="selectTableModel.filterForm"
              :filter-data="selectTableModel.filterData"
              :default-data="pillars"
              :columns="selectTableModel.columns"
              :total="selectTableModel.total"
              :filter-fn="selectTableModel.filterFn"
              @current-change="changeBimModel"
              @clear="valuek.pillarNum=''" />
          </p>
          <p class="form-top-p">
            <el-button size="mini" @click="changePollar(0)">上一个</el-button>
            <el-button size="mini" @click="changePollar(1)">下一个</el-button>
          </p>
        </form>
      </div>
      <div slot="valueform" v-loading="loading" class="value-form">
        <div v-for="i in shownum" :key="i" class="relitem">
          <transverse-child1C v-if="i===1" :params="valuek" :datatime="formdata['1C']?formdata['1C']:[]" />
          <transverse-child2C v-if="i===2" :params="valuek" :datatime="formdata['2C']?formdata['2C']:[]" />
          <transverse-child3C v-if="i===3" :params="valuek" :datatime="formdata['3C']?formdata['3C']:[]" />
          <transverse-child4C v-if="i===4" :params="valuek" :datatime="formdata['4C']?formdata['4C']:[]" />
        </div>
      </div>
    </ContentForm>
  </div>
</template>

<script>
import TransverseChild1C from './components/transverse-child1C'
import TransverseChild4C from './components/transverse-child4C'
import TransverseChild2C from './components/transverse-child2C'
import TransverseChild3C from './components/transverse-child3C'
import { listByLineId } from '@/api/cms/detect-data/information'
import { findLateralAnalysisTime } from '@/api/cms/data-statistics'
import { line, listDirection, getListSection, pillarList } from '@/api/cms/detect-data/basic'
export default {
  name: 'DefectRelation',
  components: {
    TransverseChild1C,
    TransverseChild2C,
    TransverseChild3C,
    TransverseChild4C
  },
  data() {
    return {
      shownum: 4,
      loading: false,
      formdata: {}, // 查询处理的数据
      deptId: '',
      tableValue: '',
      imageurl: '',
      valuek: {
        deptCode: '', // 所选得供电段
        selectLin: '', // 选择线路
        directionId: '', // 行别
        lineSiteCode: '', // 区间
        pillarNum: '',
        pillarCode: ''
      },
      formz: {
        selectQujian: [],
        selectSection: [], // 所选得供电段
        selectLin: [],
        selectXingb: [] // 行别
      },
      pillars: [],
      selectTableModel: {
        filterForm: {
          page: 1,
          size: 30,
          // directionIds: '',
          startPillar: '',
          endPillar: ''
          // isDirection: true
        },
        filterData: {
          startPillar: {
            key: 'startPillar',
            type: 'input',
            placeholder: '开始支柱号'
          },
          endPillar: {
            key: 'endPillar',
            type: 'input',
            placeholder: '结束支柱号'
          }
        },
        columns: [
          { label: '支柱号', property: 'pillarNum' },
          { label: '行别', property: 'directionName', formatter: row => row.directionAttr ? row.directionAttr.directionName : '' },
          { label: '区间站场', property: 'siteAttr', formatter: row => row.siteAttr ? row.siteAttr.siteName : '' },
          { label: '隧道', property: 'tunnelName', formatter: row => row.tunnelAttr ? row.tunnelAttr.tunnelName : '' },
          { label: '公里标', property: 'roadMark', formatter: row => this.formatRoad(row.roadMark) }
        ],
        total: 0,
        filterFn: pillarList
      },
      bimModelAttr: {}
    }
  },
  watch: {
    'valuek.pillarNum': function(val) {
      if (val && val !== '') {
        this.getFromvalue()
      }
    }
  },
  mounted() {
    this.loading = true
    getListSection().then(res => {
      this.loading = false
      const selectSection = []
      if (res.data) {
        res.data.forEach(item => {
          const section = {}
          section.deptCode = item.deptCode + '-' + item.deptName + '-' + item.id
          section.deptName = item.deptName
          selectSection.push(section)
        })
      }
      this.formz.selectSection = selectSection
    }).catch(_ => {
      this.loading = false
    })
    this.line()
    this.listDirection()
    this.getpillarList()
  },
  methods: {
    changePollar(num) {
      if (num) {
        this.$refs.selecttable.changepage(1)
      } else {
        this.$refs.selecttable.changepage(0)
      }
    },
    line(val) {
      const obj = {
        deptId: ''
      }
      if (val) {
        obj.deptId = val.split('-')[2]
        this.deptId = val.split('-')[2]
      }
      this.valuek.selectLin = ''
      this.listByLineId()
      line(obj).then(response => {
        // console.log('线路下拉框', response)
        const lines = []
        if (response.data) {
          response.data.forEach(item => {
            const line = {}
            line.value = item.lineId + '-' + item.lineCode
            line.label = item.lineName
            lines.push(line)
          })
        }
        this.formz.selectLin = lines
      })
    },
    listDirection() {
      listDirection().then(response => {
        // console.log('行别下拉框', response)
        const directions = []
        if (response.data) {
          response.data.forEach(item => {
            const direction = {}
            direction.value = item.directionCode
            direction.label = item.directionName
            direction.id = item.id
            directions.push(direction)
          })
        }
        this.formz.selectXingb = directions
      })
    },
    listByLineId() {
      this.getpillarList()
      const deptId = this.deptId
      const line = this.valuek.selectLin
      this.valuek.lineSiteCode = ''
      this.formz.selectQujian = []
      if (line) {
        const lineCode = line.split('-')[0]
        listByLineId({ deptId: deptId, lineId: lineCode }).then(response => {
          // console.log('区间下拉框', response)
          const sites = []
          if (response.data) {
            response.data.forEach(item => {
              const site = {}
              site.value = item.lineSiteCode + '-' + item.siteId
              site.label = item.siteName
              site.lineSiteCode = item.lineSiteCode
              sites.push(site)
            })
          }
          this.formz.selectQujian = sites
        })
      }
    },
    // 获取支柱
    getpillarList() {
      this.valuek.pillarNum = ''
      this.pillars = []
      if (this.valuek.selectLin !== '' && this.valuek.directionId !== '' && this.valuek.lineSiteCode !== '') {
        const lineId = this.valuek.selectLin.split('-')[0]
        const selectQujian = this.valuek.lineSiteCode.split('-')[1]
        this.selectTableModel.filterForm = Object.assign({}, this.selectTableModel.filterForm, {
          page: 1,
          lineId: lineId,
          directionIds: this.valuek.directionId,
          siteIds: selectQujian,
          startPillar: '',
          endPillar: ''
        })
        pillarList(this.selectTableModel.filterForm)
          .then(response => {
            this.pillars = response.data.records
            this.selectTableModel.total = response.data.total
          })
          .catch(_ => {})
      }
    },
    // 选择支柱号
    changePillar(data) {
      this.dialog.form.pillarList = data.map(item => ({
        pillarId: item.id,
        pillarNum: item.pillarNum,
        pillarCode: item.pillarCode,
        roadMark: item.roadMark,
        anchorList: item.anchorList || []
      }))
      const allAnchorList = this.dialog.form.pillarList.filter(item => item.anchorList.length).map(item => item.anchorList).flat()
      this.dialog.form.anchorList = allAnchorList.filter((item, index, arr) => {
        return arr.findIndex(child => item.anchorId === child.anchorId) === index
      })
      // this.getDeviceCode(data[0] && data[0].id)
    },
    changeBimModel(data) {
      this.valuek.pillarNum = data.pillarNum
      this.valuek.pillarCode = data.pillarCode
      // this.getFromvalue()
    },
    getFromvalue() {
      if (!this.valuek.pillarNum) {
        this.$alert('请选择支柱', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      var obj = Object.assign({}, this.valuek, {
        lineCode: this.valuek.selectLin.split('-')[1],
        lineSiteCode: this.valuek.lineSiteCode.split('-')[0],
        deptName: this.valuek.deptCode.split('-')[1]
      })
      this.loading = true
      // this.shownum = 0
      findLateralAnalysisTime(obj).then(res => {
        // this.shownum = 4
        this.loading = false
        this.formdata = res.data
      }).catch(_ => {
        // this.shownum = 4
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-loading-parent--relative{
  position: initial!important;
}
</style>
